<template lang="html">
  <div id="pageBox">
    <div class="clockIn" v-if="nowChap==0">
      打卡得学分
    </div>
    <BgStyle>
      <div class="bgImg" slot="img">
        <div class="headerContent pd20">
          <div class="iconBox">
            <span class="iconfont icon-start"></span>
          </div>
          <div class="text">
            收听今日全部学习章节
          </div>
          <div class="time">
            15分钟
          </div>
        </div>
      </div>
      <div class="content" slot="content">
        <div class="chapter">
          <div class="chapTitle">
            目录 {{ bookName }}
            <div class="tag">
              精选
            </div>
          </div>
          <div class="chapList pd20">
            <ul class="list">
              <li class="item" v-for="(v,i) in chapList" @click="changeChap(v, i + 1)">
                <div class="index">
                  第{{i + 1}}章
                </div>
                <div class="name overflow1">
                  {{ v.chapterName }}
                </div>
                <div class="read y" v-if="v.read">
                  已阅读
                </div>
                <div class="read n" v-if="!v.read">
                  未阅读
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </BgStyle>
    <div class="footer">
      <ul class="footerList">
        <li class="footerItem" @click="changeChap()">开始学习 <span class="iconfont icon-arrow-right"></span></li>
      </ul>
    </div>
  </div>
</template>

<script>
import BgStyle from '@/components/bgStyle';
import { getChap } from '@/api/pay'
export default {
  components:{
    BgStyle
  },
  data(){
    return {
      nowChap:0,
      dayNumId: this.$route.query.dayNumId,
      bookId: this.$route.query.bookId,
      bookName: this.$route.query.bookName,
      chapList: []
    }
  },
  created() {
    console.log(this.$route);
    
    this.getChap()
  },
  methods:{
    getChap() {
      const { dayNumId, bookId } = this
      getChap({ dayNumId, bookId }).then(res => {
        this.chapList = res.data
      })
    },
    changeChap(v, chap = 1){
      const { bookName } = this
      
      let id, bookId
      if (v && v.id) {
        id = v.id
        bookId = v.bookId
      } else if (!v && this.chapList[0]) {
        id =  this.chapList[0].id 
        bookId = this.chapList[0].bookId
      }
      this.$router.push(`/payReadContent/?bookId=${bookId}&bookName=${bookName}&chap=${chap}`)
    },
  },
}
</script>

<style lang="less" scoped>
  #pageBox{
    .clockIn{
      position: fixed;
      font-size:0.14rem;
      background:#6B6BFA;
      color:#fff;
      width:1rem;
      height:0.24rem;
      line-height: 0.25rem;
      border-radius: 0.12rem 0 0 0.12rem;
      padding-left:0.1rem;
      right:0;
      top:0.82rem;
      z-index: 98;
      box-shadow: 0.04rem 0.02rem 0.1rem 0.02rem #dedede;
    }
    .bgImg{
      .headerContent{
        display: flex;
        height:0.8rem;
        padding:0.2rem;
        .iconBox{
          width:0.4rem;
          height:0.4rem;
          background:#fff;
          border-radius: 50%;
          line-height: 0.4rem;
          text-align: center;
          color:#999;
          padding-left:0.03rem;
          span{
            font-size:0.18rem;
          }
        }
        .text{
          flex:1;
          color:#fff;
          line-height: 0.4rem;
          padding:0 0.1rem 0 0.2rem;
          font-size:0.14rem;
        }
        .time{
          width:0.6rem;
          line-height: 0.4rem;
          font-size:0.12rem;
          color:#fff;
          text-align: right;
        }
      }
    }
    .content{
        height:100%;
        overflow-y: scroll;
        -webkit-overflow-scrolling:touch;
        padding-bottom:0.1rem;
        .chapter{
          .chapTitle{
            position:relative;
            padding:0.3rem 0.2rem 0.2rem;
            .tag{
              position:absolute;
              right:0.2rem;
              top:0.31rem;
              font-size:0.12rem;
              color:red;
              border:1px solid red;
              padding:0.01rem 0.04rem;
            }
          }
          .chapList{
            .list{
              .item{
                width:100%;
                display: flex;
                padding:0.14rem 0;
                border-bottom:1px solid #dedede;
                .index{
                  min-width:0.6rem;
                  color:#999;
                  font-size:0.14rem;
                }
                .name{
                  flex:1;
                  font-size:0.14rem;
                }
                .read{
                  border:1px solid #999;
                  color:#999;
                  font-size:0.12rem;
                  height:0.22rem;
                  line-height: 0.22rem;
                  padding:0 0.1rem;
                  border-radius: 0.11rem;
                  &.y{
                    color:#999;
                    border-color:#999;
                  }
                  &.n{
                    color:blue;
                    border-color:blue;
                  }
                }
              }

            }
          }
        }
    }
    .footer{
      position:fixed;
      left:0;
      bottom:0;
      width:100%;
      height:0.48rem;
      background:#fff;
      box-shadow: 0 0 20px 2px #dedede;
      z-index: 99;
      .footerList{
        width:100%;
        height:100%;
        display: flex;
        .footerItem{
          flex:1;
          text-align: center;
          line-height: 0.48rem;
          &.disabled{
            color:#999;
          }
        }
      }
    }
  }
</style>
